import { Footer } from '@components/common/footer/footer'
import { Header } from '@components/common/header/header'
import { TeacherListPage } from '@components/common/teacherListPage/teacherListPage'
import { ReactComponentExt } from '@helpers/ReactExt'
import { GlobalStoreModel } from '@store/globalStore'
import { HomeStoreModel } from '@store/homeStore'
import { BaseProps, ComponentStore } from '@store/store'
import { Button, DatePicker } from 'antd'
import { inject, observer } from 'mobx-react'
import * as React from 'react'
import { Link } from 'react-router-dom'
import * as styles from './home.less'

export interface HomeProps extends BaseProps {
  homeStore: HomeStoreModel
  globalStore: GlobalStoreModel
}

// tslint:disable-next-line:no-empty-interface
interface HomeStates {
}

@inject((store: ComponentStore) => {
  return { homeStore: store.homeStore, globalStore: store.globalStore }
})
@observer
export class Home extends ReactComponentExt<HomeProps, HomeStates> {
  public init() {
    this.getArticleDetail = this.getArticleDetail.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
  }

  public componentDidMount() {
    // todo

  }

  public render() {
    const { unfinishedTodoCount } = this.props.homeStore
    return (
      <div>
        <Header a={1} b={2} />
        <DatePicker />
        <TeacherListPage />
        <Button type='primary'>
          {unfinishedTodoCount}
        </Button>
        <button className={styles.hello} onClick={this.getArticleDetail}>
          获取文章详情
        </button>
        <Footer a={1} b={1}>
          {(a: number, b: number) => {
            console.log(a, b)
            return <div>login test</div>
          }}
        </Footer>

        <li>
          <Link to='/login'>登录</Link>
        </li>
        {/* 需要避免 onClick = {()=>{....todo }}  这样的写法*/}
        <button className={styles.hello} onClick={this.handleBtnClick}>
          创建学生
        </button>
      </div>
    )
  }

  private getArticleDetail(e: React.MouseEvent) {
    this.props.homeStore.modifyTodos({ content: 'todo', finished: false })
  }

  private handleBtnClick() {
    // todo
    this.api.createStudent({
      name: 'xhm',
      address: 'test',
      age: 0,
      height: 120,
      weight: 20,
      avatar: 'test',
      fatherName: 't',
      motherName: 't',
      fatherPhoneNumber: 11,
      motherPhoneNumber: 11,
      fatherWechat: 'wx',
      guardian: 'wx',
      joinSchoolTime: '12',
      motherWxchatNumber: '12',
      remark: '',
      sex: 0,
      shoeSize: 12,
      studentNumber: 123,
      isGainSchoolUniform: 0,
      isPayTuition: 0,
      schoolType: 0
    })

  }
}
